<template>
    <div class="warp">
        <div class="menuList">
            <div class="screen">
                <el-input size="mini" @change="search(0)" v-model.trim="queryForm.elderlyCode" autocomplete="off" placeholder="请输入入住人编号/姓名"></el-input>
                <el-date-picker
                    style="width: 100%;margin-top: 5px;"
                    size="mini"
                    v-model="startAndFinish"
                    @change="search(0)"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="入住开始日期"
                    end-placeholder="入住结束日期">
                </el-date-picker>
            </div>
            <div class="list" v-loading="listLoading">
                <ul v-if="list">
                    <li :class="{ 'active': index === showIndex }" v-for="(item, index) in list" @click="showIndex = index; activeRow = item; getList(item)" >
                        <b>{{ item.elderlyName }}</b>
                        <b class="prewidth">{{ item.checkInBed }}</b>
                        <b >{{ item.nursingLevelName }}</b>
                    </li>
                </ul>
                <div v-else class="listNull">暂无数据</div>
                <el-pagination
                    small
                    layout=" prev, pager, next,total"
                    :current-page=queryForm.currPageNo
                    :total="total"
                    :page-size="queryForm.limit"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                ></el-pagination>
            </div>
        </div>

        <div  class="mainbox" v-loading="dataLoading">

          <el-tabs  v-model="activeName" @tab-click="handleClick(activeRow)">
            <el-tab-pane label="健康数据" name="first">
              <div v-if="!activeRow" class="listNull">暂无数据</div>

              <div v-if="activeRow">
                <div class="userInfo" >
                  <div :class="{'active': activeRow.aaaa}" class="ztBox">{{ activeRow.aaaa ? '离床' : '在床' }}</div>
                  <div class="box">
                    <img src="../../../assets/huxi.gif">
                    <h3><span>45</span>次/分</h3>
                    <p>呼吸率</p>
                  </div>
                  <div class="box">
                    <img src="../../../assets/xinlv.gif">
                    <h3><span>64</span>次/分</h3>
                    <p>心率</p>
                  </div>
                </div>
                <el-scrollbar
                  wrapClass="scrollbar-wrap"
                  :style="{height: scrollHeight}"
                  ref="scrollbarContainer">
                  <div class="line">
                    <h2>心率趋势图</h2>
                    <line-chart :chart-data="activeDate.newVisitis" />
                  </div>
                  <div class="line">
                    <h2>呼吸趋势图</h2>
                    <line-chart :chart-data="activeDate.messages" />
                  </div>
                  <div class="line">
                    <h2>血压趋势图</h2>
                    <line-chart :chart-data="activeDate.purchases" />
                  </div>
                  <!-- <raddar-chart />
                  <pie-chart /> -->
                  <div class="line">
                    <h2>睡眠情况分析</h2>
                    <bar-chart />
                  </div>
                </el-scrollbar>
              </div></el-tab-pane>
            <el-tab-pane label="报警处理" name="second" style="margin: 20px">
              <div class="userInfo" style="min-height: calc(100vh - 310px);">
                <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%;min-height: calc(100vh - 380px);"
                  @selection-change="handleSelectionChange">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column
                    label="日期"
                    width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="地址"
                    show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column
                    align="right">
                    <template slot="header" slot-scope="scope" >
                      <el-button type="warning" size="mini" v-if="tableData!=''">批量处理</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  style="padding-bottom: 20px"
                  :background="true"
                  :current-page=queryForm.currPageNo
                  :total="total"
                  :page-size="queryForm.limit"

                ></el-pagination>
              </div>


            </el-tab-pane>

          </el-tabs>




        </div>


    </div>
</template>

<script>
    import { searchCheckinInfoOfCondition, searchDailyCareListByListTime } from "@/api/record"
    import PanelGroup from './components/PanelGroup'
    import LineChart from './components/LineChart'
    import RaddarChart from './components/RaddarChart'
    import PieChart from './components/PieChart'
    import BarChart from './components/BarChart'
    import TransactionTable from './components/TransactionTable'
    import TodoList from './components/TodoList'
    import BoxCard from './components/BoxCard'
    export default {
        name: "Medicalcheckup",
        components: {
            PanelGroup,
            LineChart,
            RaddarChart,
            PieChart,
            BarChart,
            TransactionTable,
            TodoList,
            BoxCard
        },
        computed:{
            startAndFinish:{
                get(){
                    return [this.queryForm.checkedInTimeStart, this.queryForm.checkedInTimeEnd]
                },
                set(val){
                    this.queryForm.checkedInTimeStart = val ? val[0] : ''
                    this.queryForm.checkedInTimeEnd = val ? val[1] : ''
                },
            },
        },
        data(){
            return {
                tableData: [

                ],
                scrollHeight:'0px',
                activeName: 'first',
                queryForm: {
                    limit:10,
                    elderlyCode: '',
                    checkedInTimeStart: '',
                    checkedInTimeEnd: '',
                },
                total: 0,
                list: '',
                showIndex: 0,
                activeRow: '',
                listLoading: false,
                activeDate: {
                    newVisitis: {
                    },
                    messages: {
                    },
                    purchases: {
                    }
                },
                dataLoading: false,
            }
        },
        mounted(){
            this.search(0)

            this.scrollHeight = window.innerHeight*0.43 + 'px';
        },
        methods: {
            search(id) {
                this.listLoading = true;
                if (id == 0) {
                    this.queryForm.currPageNo = 1
                }
                searchCheckinInfoOfCondition(this.queryForm).then(res => {

                    this.list = res.data.data
                    this.total = res.data.total
                    this.listLoading = false;
                    if(res.data.data){
                        this.activeRow=1
                        this.getList()
                    }

                })
            },
            getList(row) {
                this.dataLoading = true
                this.activeName='first',

                    setTimeout(() => {
                    this.dataLoading = false
                    this.activeDate = {
                        newVisitis: {
                            expectedData: [50, 70, 80, 65, 58, 72, 61,100],
                        },
                        messages: {
                            actualData: [45, 48, 51, 64, 52, 49, 60]
                        },
                        purchases: {
                            expectedData: [110, 120, 116, 134, 125, 130, 118],
                            actualData: [85, 90, 91, 84, 86, 88, 83]
                        },
                        shoppings: {
                            expectedData: [130, 140, 141, 142, 145, 150, 160],
                            actualData: [120, 82, 91, 154, 162, 140, 130]
                        }
                    }
                }, 500)
            },
            handleSelectionChange(val) {
                console.log(val)
            },
            handleSizeChange(val) {
                this.showIndex=0
                this.queryForm.limit = val;
                this.search();
                // setTimeout(() => {
                //     console.log(this.list[0].checkInMark)
                //     if(this.list){
                //         this.activeRow.checkInMark=this.list[0].checkInMark
                //         this.listForm.checkInMark= this.list[0].checkInMark
                //         this.searchDailyCareListByListTime()
                //     }
                //
                // }, 1000);

            },
            handleCurrentChange(val) {
                this.showIndex = 0
                this.queryForm.currPageNo = val;
                this.search();
            },
            handleClick(row) {
                console.log(row);
            }
        }
    }
</script>

<style scoped>
    .menuList ul{background: #fff;list-style: none;padding: 0;}
    .menuList li{line-height: 40px;padding-left: 20px;transition: all 0.4s;border-bottom: 1px solid #eee;font-size: 14px;}
    .menuList li:first-child{border-top: 1px solid #eee;}
    .menuList li:hover{background: #ccc;cursor: pointer;border-color: #ccc;}
    .menuList li.active{background: #1890ff;cursor: pointer;color: #fff;border-color: #1890ff;}
    .menuList li b{margin-right: 10px;display: inline-block;width: 60px;}

    .warp{position: relative;padding: 20px;}
    .menuList{width: 300px;position: absolute;left: 20px;top: 20px;}
    .mainbox{margin-left: 320px;background: #eee;height: calc(100vh - 200px);padding-top: 1px;padding-bottom: 1px;}
    .listNull{text-align: center;line-height: 200px;}
    .line{background: #fff;margin: 20px;}
    .line h2{line-height: 16px;padding-left: 20px;font-size: 16px;padding-top: 20px;}

    .userInfo{background: #fff;margin: 20px;padding-top: 1px;overflow: hidden;}
    .userInfo .ztBox{width: 120px;height: 120px;border-radius: 50%;border:2px solid #67C23A;text-align: center;line-height: 120px;font-size: 20px;color: #67C23A;box-shadow: 0 0 0 10px #fff, 0 0 0 20px #67C23A;margin: 40px;float: left;}
    .userInfo .ztBox.active{width: 120px;height: 120px;border-radius: 50%;border:2px solid #909399;text-align: center;line-height: 120px;font-size: 20px;color: #909399;box-shadow: 0 0 0 10px #fff, 0 0 0 20px #909399;margin: 40px;}
    .userInfo .box{float: left;width: 100px;text-align: center;margin-left: 50px;padding-top: 30px;}
    .userInfo .box img{height: 60px;}
    .userInfo .box h3{font-size: 16px;}
    .userInfo .box h3 span{color: #67C23A;font-size: 18px;}
    .el-scrollbar{
      height: 90%;

    }

     .mainbox >>> .el-tabs__header {
       margin: 20px;
     }
</style>


